<template>
  <div id="masonry-wall">
    <div>
      <button class="button" @click="add">add</button>
      <button class="button" @click="remove">remove</button>
      <button class="button" @click="swap">swap</button>
    </div>
    <div id="scroll-container" ref="scrollContainer">
      <masonry-wall
        :scroll-container="scrollContainer"
        :items="items"
        :gap="16"
      >
        <template #default="{ item, index }">
          <div class="masonry-item">
            <h1>{{ item.title }} ({{ index }})</h1>
            <span>{{ item.description }}</span>
          </div>
        </template>
      </masonry-wall>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
        scrollContainerEl: null,
        index: 9,
        items: [
            {
            id: '1111111111111111111111111111111111133333333333333333333333333333',
            title: '11111111111111111111111111111111111333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333'
            },
            { id: 2, title: 2 },
            { id: 3, title: '1111111111111111111111111111111111133333333333333333333333333333' },
            { id: 4, title: '4' },
            { id: 5, title: 5 },
            { id: 6, title: 6 },
            { id: 7, title: 7 },
            { id: 8, title: 8 },
            { id: 9, title: 9 }
        ],
    }
  },
  computed: {
    scrollContainer() {
      return this.scrollContainerEl;
    }
  },
  mounted() {
    // 确保 DOM 已加载
    this.scrollContainerEl = this.$refs.scrollContainer;
  },
  methods: {
    add() {
      this.index++;
      this.items.push({
        id: this.index,
        title: this.index
      });
      this.items = [...this.items]
    },
    remove() {
      this.items.splice(0, 1)
      this.items = [...this.items]
    },
    swap() {
      const temp = this.items[this.items.length - 1];
      this.items[this.items.length - 1] = this.items[0]
      this.items[0] = temp
      this.items = [...this.items]
    }
  }
}
</script>

<style scoped>
#masonry-wall {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

#scroll-container {
    flex-grow: 1;
}
</style>
